import wsAPI from "@/app/[language]/site/lib/wsAPI";

import { useSiteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { Button, Col, Form, Input, Modal, Row } from "reactstrap";

const EventPB = require("@/Event_pb");

export default observer(
  ({ siteID, siteName }: { siteID: string; siteName: string }) => {
    const {
      setSiteWindowOpened,
      isSiteCipherWindowOpened,
      setSiteCipherWindowOpened,
    } = useSiteStore();
    const [siteCipher, setSiteCipher] = useState("");
    const t = useTranslations();

    const onEnterSite = () => {
      wsAPI.send({
        eventID: EventPB.Event.EventID.ENTER_SITE,
        text: JSON.stringify({ siteID, siteCipher }),
      });
      setSiteCipherWindowOpened(false);
      setSiteWindowOpened(false);
    };

    return (
      <Modal
        isOpen={isSiteCipherWindowOpened}
        toggle={() => {
          setSiteCipherWindowOpened(false);
        }}
        centered
      >
        <Form>
          <Row className="g-0">
            <Col className="m-1">
              <Input value={siteName} disabled />
            </Col>
          </Row>
          <Row className="g-0">
            <Col className="m-1">
              <Input
                autoComplete="new-password"
                value={siteCipher}
                onChange={({ target: { value } }) => {
                  setSiteCipher(value);
                }}
                type="password"
                placeholder={t("siteCipher")}
                onKeyDown={({ key }) => {
                  if (key === "Enter") {
                    onEnterSite();
                  }
                }}
              />
            </Col>
          </Row>
          <Row className="justify-content-center g-0">
            <Col className="m-1" xs="auto">
              <Button onClick={onEnterSite}>{t("enterSite")}</Button>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  },
);